<template>
  <div class="Head">
    <div class="l-content">
      <img src="../../assets/img/jgc.png" alt />
    </div>
    <div class="r-content">
      <el-dropdown>
        <div class="head-portrait">
          <i class="el-icon-user"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="logout">
            {{$t('message.public.out')}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="nowTime">{{nowTime}}</div>
      <i class="el-icon-full-screen" @click="handleFullScreen"></i>
    </div>
  </div>
</template>

<script>
import {deLcalStorage} from '@/utils/storage'
// 导出模块
export default {
  // 模块名字
  name: "Head",
  // 模块数据
  data() {
    //数据
    return {
      nowTime: "",
      exitFullscreen: false,
      fullscreen:false
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      let hh =
        new Date(timeStamp).getHours() < 10
          ? "0" + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours();
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? "0" + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes();
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? "0" + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds();
      this.nowTime =
        year + "-" + month + "-" + date + "" + " " + hh + ":" + mm + ":" + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },
    clear() {
      clearInterval(this.nowTimes);
      this.nowTimes = null;
    },
    handleFullScreen() {
      let element = document.documentElement;
      
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen
    },
    logout(){
      this.$router.push('/')
      deLcalStorage('activeClass')
      deLcalStorage('accType')
    }
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {
    this.nowTimes();
  },
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
};
</script>
<style  lang="scss" scoped>
.Head {
  // width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #213D49;
  box-shadow: inset 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
  .l-content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 40px;
    span {
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      font-size: 20px;
      margin: 0 6px;
    }
  }
  .r-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 16px;
    .head-portrait {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(212, 215, 217, 1);
      text-align: center;
      line-height: 24px;
      cursor: pointer;
      .el-icon-user{
        font-size: 20px;
      }
    }
    .nowTime {
      color: rgba(255, 255, 255, 0.65);
      font-size: 14px;
      margin: 0 8px;
    }
    .el-icon-full-screen {
      font-size: 16px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.65);
    }
  }
}

::v-deep .el-dropdown-menu__item:focus,::v-deep .el-dropdown-menu__item:not(.is-disabled):hover{
      background-color:#FFCCC7;
      color:#606266;
}
</style>
